<template>
    <div>
        <el-menu :default-active="activeIndex"  mode="horizontal" @select="handleSelect" class="overflow">
                <el-menu-item v-for="(item, index) in menuData" :key="index" :index="index+''" >
                    <i :class="item.avatar" class="nav-icon" v-if="item.avatar"></i>{{item.title}}
                </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "TopMenu",
        props: ['menuData'],
        data: function () {
            return {
                activeIndex: '0'
            };
        },
        methods: {
            handleSelect:function(event){
                let index = event;
                let data = this.menuData;
                let result = data[index].children;
                sessionStorage.setItem('menuData',JSON.stringify(result))
                this.$emit("childrenData", result);
            }
        }
    }
</script>

<style lang="less" scoped>
.overflow {
    overflow: hidden;
}
</style>